<template>
    <view>
        <div>
            <div v-if="goodsListRow1.length">
                <scroll-view scroll-x="true">
                    <div style="display: flex;" :style="{width: goodsListRow1.length * 120 + 'px'}">
                        <view class="demo-warter" v-for="(item, index) in goodsListRow1" :key="index"
                              @click="navigateTo(`/pages/common/goods-detail/index?id=${item.goodsId}`)">
                            <u-icon size="60" name="/static/icon/recommend.png" style="position: absolute; z-index: 50;"></u-icon>
                            <!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件，比如下方的u-lazy-load组件 -->
                            <u-lazy-load threshold="-450" border-radius="10"
                                         :image="item.thumbnailUrl ? item.thumbnailUrl + '?imageView2/1/w/300/h/300' : '/static/default-image/goods.jpg'"
                                         :index="index"></u-lazy-load>
                            <view class="demo-title">{{ item.goodsTitle }}</view>
                            <view class="demo-price">￥{{ item.price | toFixed2 }}</view>
                            <view class="demo-tag">
                            </view>
                        </view>
                    </div>
                </scroll-view>
            </div>
            <div v-if="goodsListRow2.length">
                <scroll-view scroll-x="true">
                    <div style="display: flex;" :style="{width: goodsListRow2.length * 120 + 'px'}">
                        <view class="demo-warter" v-for="(item, index) in goodsListRow2" :key="index"
                              @click="navigateTo(`/pages/common/goods-detail/index?id=${item.goodsId}`)">
                            <u-icon size="60" name="/static/icon/recommend.png" style="position: absolute; z-index: 50;"></u-icon>
                            <!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件，比如下方的u-lazy-load组件 -->
                            <u-lazy-load threshold="-450" border-radius="10"
                                         :image="item.thumbnailUrl ? item.thumbnailUrl + '?imageView2/1/w/300/h/300' : '/static/default-image/goods.jpg'"
                                         :index="index"></u-lazy-load>
                            <view class="demo-title">{{ item.goodsTitle }}</view>
                            <view class="demo-price">￥{{ item.price | toFixed2 }}</view>
                            <view class="demo-tag">
                            </view>
                        </view>
                    </div>
                </scroll-view>
            </div>
        </div>
    </view>
</template>

<script>

    import {TbGoodsRecommendService} from "../../../../dev/services/tb-goods-recommend.service";
    import {CommonUtil} from "../../../../dev/core/utils/common.util";

    export default {
        props: ["goodsDetailGoodsRecommendTemplateId"],
        data() {
            return {
                goodsListRow1: [],
                goodsListRow2: [],
            }
        },
        mounted() {
            const _self = this;
            console.log(_self.goodsDetailGoodsRecommendTemplateId);
            _self.findGoodsListByGoodsDetailGoodsRecommendTemplateId();
        },
        methods: {
            findGoodsListByGoodsDetailGoodsRecommendTemplateId() {
                const _self = this;
                let colNum = Math.ceil(CommonUtil.getScreenWidth() / 120);  // 向上取整，获得商品每行显示的最小个数。
                console.log("推荐商品每行展示个数：" + colNum);
                new TbGoodsRecommendService().findTbGoodsRecommendListCascade({
                    fkId: _self.goodsDetailGoodsRecommendTemplateId,
                    status: "1",
                    deleted: 0,
                    isFindValidTimeRange: true,
                    orderBy: 'display_order asc'
                }).then(result => {
                    let goodsList = result;
                    if (goodsList.length <= colNum) {
                        _self.goodsListRow1 = goodsList;
                    } else if (goodsList.length <= colNum * 2) {
                        _self.goodsListRow1 = goodsList.filter((item, index) => index < colNum);
                        _self.goodsListRow2 = goodsList.filter((item, index) => index >= colNum);
                    } else {
                        _self.goodsListRow1 = goodsList.filter((item, index) => index < Math.ceil(goodsList.length / 2));
                        _self.goodsListRow2 = goodsList.filter((item, index) => index >= Math.ceil(goodsList.length / 2));
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "./index.scss";
</style>
